<template>
  <div>
    <!-- 修改用户个人信息弹出层 -->
    <el-dialog
      title="修改茶叶信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        status-icon
        :rules="rules"
        :model="modifyForm"
        ref="modifyForm"
        style="color: black"
      >
        <el-form-item label="头像" name="modify" label-width="70px" prop="">
          <img
            style="width: 80px; height: 80px"
            :src="require('/src/assets/img/' + modifyForm.imgPath)"
            alt=""
          />
        </el-form-item>
        <el-form-item label="茶名" name="modify" label-width="70px" prop="name">
          <el-input type="text" v-model="modifyForm.name" />
        </el-form-item>

        <el-form-item label="类型" name="" label-width="70px" prop="">
          <el-select v-model="modifyForm.type">
            <el-option value="红茶">红茶</el-option>
            <el-option value="绿茶">绿茶</el-option>
            <el-option value="白茶">白茶</el-option>
            <el-option value="乌龙茶">乌龙茶</el-option>
            <el-option value="黑茶">黑茶</el-option>
            <el-option value="黄茶">黄茶</el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="品牌"
          name="modify"
          label-width="70px"
          prop="brand"
        >
          <el-input type="text" v-model="modifyForm.brand" />
        </el-form-item>

        <el-form-item
          label="价格"
          name="modify"
          label-width="70px"
          prop="price"
        >
          <el-input type="text" v-model="modifyForm.price" />
        </el-form-item>
        <el-form-item
          label="库存量"
          name="modify"
          label-width="70px"
          prop="store"
        >
          <el-input type="text" v-model="modifyForm.store" />
        </el-form-item>

        <el-form-item label="所属商家" name="modify" label-width="70px" prop="">
          <el-input type="text" v-model="modifyForm.username" disabled />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="infoCancel">取 消</el-button>
        <el-button type="primary" @click="submitForm('modifyForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { postRequest } from "../../util/request";
// import axios from "axios";
export default {
  name: "ModifyTeaInfo",
  data() {
    return {
      dialogVisible: false,
      //修改个人信息表单数据
      modifyForm: {
        imgPath: "oolong.jpg",
        name: "",
        type: "",
        brand: "",
        price: 0,
        store: "",
        teaId: "",
        username: "",
      },
      rowData: {},
      //验证规则匹配
      rules: {
        //用户名
        username: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入用户名！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //价格
        price: [
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("多少钱还输入呢！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //茶名
        name: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入茶名！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        //库存量
        store: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入库存量！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  //   props: ["rowData"],
  methods: {
    //提交按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //发送修改信息请求
          let updateResult = postRequest("admin/updateTea", {
            teaInfo: this.modifyForm,
          });
          updateResult.then((response) => {
            if (response.data.isUpdate) {
              this.$message({
                type: "success",
                message: "修改成功!",
                duration: 3000,
              });
              //通知父组件进行重新渲染
              this.$emit("gotoInit", true);
              //关闭弹出框
              setTimeout(() => {
                this.dialogVisible = false;
              }, 500);
            }
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },

    //切换省份
    changeProvince() {
      this.city = "";
      this.county = "";
      this.address2 = this.address1.filter((item) => {
        return this.province === item.title;
      });
      this.address2 = this.address2[0].children;
    },
    //切换市
    changeCity() {
      this.county = "";
      this.address3 = this.address2.filter((item) => {
        return this.city == item.title;
      });
      this.address3 = this.address3[0].children;
    },
    //关闭弹出层
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.modifyForm.name = "";
          this.modifyForm.brand = "";
          this.modifyForm.price = "";
          this.modifyForm.store = "";
          this.modifyForm.username = "";
          done();
        })
        .catch(() => {});
    },

    //个人信息取消
    infoCancel() {
      this.dialogVisible = false;
      /* let { password, confirmPassword, email, phone, address, specificArea } =
        this.modifyForm; */
      this.modifyForm.name = "";
      this.modifyForm.brand = "";
      this.modifyForm.price = "";
      this.modifyForm.store = "";
      this.modifyForm.username = "";
    },
  },
  mounted() {
    this.$bus.$on("teaData", (rowData) => {
      // console.log(rowData);
      this.modifyForm.teaId = rowData.teaId;
      this.rowData = rowData;
      this.modifyForm.username = rowData.username;
      this.modifyForm.name = rowData.name;
      this.modifyForm.imgPath = rowData.imgPath;
      this.modifyForm.type = rowData.type;
      this.modifyForm.brand = rowData.brand;
      this.modifyForm.price = parseFloat(rowData.price);
      this.modifyForm.store = parseInt(rowData.store);

      this.dialogVisible = true;
    });
  },
};
</script>

<style>
</style>